<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台签名管理</title>
  <link rel="stylesheet" href="../css/sign_manager.css">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <script src="../js/jquery-min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/vue.js"></script>
  <!-- <link rel="icon" href="../favicon.ico"/> -->
</head>

<body>
  <div class="header" class="clearfix">
    <div class="logo">
      <a href="index.html">
        <img src="../images/logo.png" alt="logo">
      </a>
    </div>
    <div class="owner">
      <span>教育局管理中心</span>
    </div>
  </div>
  <div id="root">
    <div class="content w">
      <div class="service clearfix">
        <div class="search">
          根据存证 ID 查询&nbsp;&nbsp;&nbsp;<input type="text" v-model="keyword" @keyup.enter="filter_evidences">
          <button @click="filter_evidences"></button>
        </div>
        <div class="create">
          创建存证&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
            data-whatever="@mdo">+</button>
        </div>
      </div>

      <form action="">
        <table class="con-table">
          <thead class="con-th">
            <tr>
              <th>存证ID</th>
              <th>学校地址</th>
              <th>学校名称</th>
              <th>学生地址</th>
              <th>学生姓名</th>
              <th>创建时间</th>
              <th>操作</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody class="con-tb">
            <tr v-for="(p,index) in fil_evidences" :key="index" @mouseenter="showIndex(index)">
              <td>{{p.evidencecode.substr(0,12)}}</td>
              <td>{{p.schoolaccount.substr(0,12)}}</td>
              <td>{{p.schoolname}}</td>
              <td>{{p.studentaccount.substr(0,12)}}</td>
              <td>{{p.studentname}}</td>
              <td>{{p.created}}</td>
              <td><button @click.once="revoke(evidenceIndex)" type="button">撤销</button></td>
              <td v-text="p.status == 1?'已签':'未签'" :style="{color:(p.status == 1?'green':'red')}"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <!-- 模态框部分 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">创建存证</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="sch_address" class="control-label">学校地址</label>
                <input type="text" class="form-control" id="sch_address" v-model="submit_address.schoolaccount">
              </div>
              <div class="form-group">
                <label for="stu_address" class="control-label">学生地址</label>
                <input type="text" class="form-control" id="stu_address" v-model="submit_address.studentaccount">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="submit">创建</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框结束 -->
  </div>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        all_evidences: [],
        fil_evidences: [],
        submit_address: {
          studentaccount: '',
          schoolaccount: '',
        },
        keyword: '',
        evidenceIndex:undefined,
        del_evidence:{
          evidencecode: '',
          studentaccount: '',
        }
      },
      methods: {
        filter_evidences() {
          this.fil_evidences = this.all_evidences.filter((st) => {
            return st.evidencecode == this.keyword;
          })
        },
        getEvidentData() {
          axios.get("http://localhost:80/getSignInfo").then(response => {
            this.all_evidences = response.data.data;
            this.fil_evidences = response.data.data;
          })
        },
        submit() {
          console.log(this.submit_address);
          axios.post("http://localhost:80/newEvidence", this.submit_address).then(response => {
            if (response.data.code == 200) {
              alert("添加成功");
            } else {
              alert("添加失败");
            }
          })
        },
        revoke(index) {
          this.del_evidence.evidencecode = this.fil_evidences[index].evidencecode;
          this.del_evidence.studentaccount = null;
          axios.post("http://localhost:80/removesign", this.del_evidence).then(response => {
            if (response.data.code == 200) {
              alert("删除成功");
            } else {
              alert("删除失败");
            }
          })
        },
        showIndex(index) {
          this.evidenceIndex = index;
        }
      },
      mounted() {
        this.getEvidentData();
      }
    })
  </script>
</body>

</html>